{include file="common/header-top" /}


<style>
    .thirdStep-cell-li .van-cell__title{
        max-width: 26%;
    }

    .van-cell-li{
        padding-top: 0px;
        padding-bottom: 0px;
        padding-right: 0px;
        min-height: 44px;
    }
    .van-cell-li .van-cell__left-icon{
        display: inline-block;
        padding-top: 10px;
    }
    .van-cell-li .van-cell__title span{
        display: inline-block;
        padding-top: 10px;
    }
    .van-cell-li .van-cell__value .van-field{
        background-color: #2aa24512;
        padding: 8px 10px;
        margin-top: 1px;
    }

    .van-uploader-img-zm{
        width: 100%;
        background:url("/__FRONT__/images/icon/id-card-zm.png") no-repeat;
        background-size: 100% 100%;
        opacity:0.4;
        filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
    }
    .van-uploader-img-bm{
        width: 100%;
        background:url("/__FRONT__/images/icon/id-card-bm.png") no-repeat;
        background-size: 100% 100%;
        opacity:0.4;
        filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
    }

    .van-uploader-img-license{
        width: 100%;
        background:url("/__FRONT__/images/icon/user-setting-qyzz.png") no-repeat;
        background-size: 100% 100%;
        opacity:0.4;
        filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
    }
    .van-uploader-img-logo{
        width: 100%;
        background:url("/__FRONT__/images/icon/logo-background.png") no-repeat;
        background-size: 100% 100%;
        opacity:0.4;
        filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
    }


    .van-uploader__wrapper{
        height: 200px;
    }
    .van-uploader__upload{
        background-color: #fff0;
    }
    .van-uploader__upload-icon{
        font-size: 100px;
        color: #000000;
    }

    .van-cell--required::before {
        padding-top: 15px;
    }

</style>


<div id='app' v-cloak>

    <van-nav-bar title="企业认证" left-arrow @click-left="goBack" left-text="返回" ></van-nav-bar>



    <!-- 公司认证信息 -->
    <van-row style="padding-bottom: 50px;">
        <van-cell title="法人信息" icon="/__FRONT__/images/icon/user-setting-personal.png" ></van-cell>
        <!--法人身份信息-->
        <van-col span="24">
            <van-cell title="姓名"
                      class="thirdStep-cell-li van-cell-li"
                      icon="/__FRONT__/images/icon/user-setting-name.png"
                      :required="true"
            >
                <van-field
                        v-model="userExtendBus.legal_person_name"
                        input-align="center"
                        slot="default"
                        border="false"
                        placeholder="请输入法人的姓名"
                >
                </van-field>
            </van-cell>

            <van-cell title="联系方式"
                      class="thirdStep-cell-li van-cell-li"
                      icon="/__FRONT__/images/icon/user-setting-mobile.png"
                      :required="true"
            >
                <van-field
                        v-model="userExtendBus.company_mobile"
                        input-align="center"
                        slot="default"
                        border="false"
                        placeholder="请输入您企业的联系方式"
                        @blur="checkPhoneNum"
                        :error-message="phone.error"
                        type="number"
                >
                </van-field>
            </van-cell>

            <!--短信验证码-->
            <van-cell title="验证码"
                      class="thirdStep-cell-li van-cell-li"
                      icon="/__FRONT__/images/icon/phone-smscode.png"
                      :required="true"
            >
                <van-field
                        v-model="phone.smsCode"
                        center
                        clearable
                        placeholder="请输入短信验证码"
                >
                    <van-button
                            slot="button"
                            size="small"
                            type="primary"
                            @click="sendSmsCode"
                            v-if="phone.isSendSmsCode"
                    >{{phone.sendText}}</van-button>
                    <van-count-down
                            :time="phone.againTime"
                            slot="button"
                            v-if="!phone.isSendSmsCode"
                            format="重发(ss)"
                            @finish="showSendSmsCode"
                            class="van-button van-button--small"
                            style="color:#ffffff;height: 25px; background-color: #b5b7b7;"
                    ></van-count-down>
                </van-field>
            </van-cell>
            <!--短信验证码-->



            <van-cell title="身份证"
                      class="thirdStep-cell-li van-cell-li"
                      icon="/__FRONT__/images/icon/user-setting-idcard.png"
                      :required="true"
            >
                <van-field
                        v-model="userExtendBus.legal_person_id_card"
                        input-align="center"
                        slot="default"
                        border="false"
                        placeholder="请输入法人的身份证件号"
                >
                </van-field>
            </van-cell>

            <!--证件照-->
            <van-cell
                    title="法人证件照"
                    icon="/__FRONT__/images/icon/user-setting-zj-photo.png"
                    is-link
                    @click="clickShowPhoto"
                    :required="true"
                    :value="showIsUploadFr"
            > </van-cell>
            <!--证件照-->

        </van-col>

        <!--公司信息-->
        <van-col span="24">
            <van-divider :style="{borderColor: '#32a14a', padding: '0px', margin: '5px'}"></van-divider>
            <van-cell title="公司信息" icon="/__FRONT__/images/icon/user-setting-company-r.png" ></van-cell>

            <van-cell title="公司名称"
                      class="thirdStep-cell-li van-cell-li"
                      icon="/__FRONT__/images/icon/user-setting-company-name.png"
                      :required="true"
            >
                <van-field
                        v-model="userExtendBus.company_name"
                        input-align="center"
                        slot="default"
                        border="false"
                        placeholder="请输入您公司的名称"
                >
                </van-field>
            </van-cell>


            <van-cell
                    title="所在地区"
                    icon="/__FRONT__/images/icon/publish-job-area.png"
                    is-link
                    :value="showArea"
                    @click="clickShowSelectArea"
                    :required="true"
            ></van-cell>


            <van-cell title="营业执照编号"
                      class="thirdStep-cell-li van-cell-li"
                      icon="/__FRONT__/images/icon/user-setting-company-num.png"
                      :required="true"
            >
                <van-field
                        v-model="userExtendBus.company_license"
                        input-align="center"
                        slot="default"
                        border="false"
                        placeholder="请输入您公司的营业执照编号"
                >
                </van-field>
            </van-cell>



            <!--证件照-->
            <van-cell
                    title="营业证件照"
                    icon="/__FRONT__/images/icon/user-setting-company-num.png"
                    is-link
                    @click="clickShowLicenseUploadPhoto"
                    :required="true"
                    :value="showIsUploadGs"
            > </van-cell>
            <!--证件照-->

            <!--公司简介-->
            <van-cell title="公司简介"
                      class="thirdStep-cell-li van-cell-li"
                      icon="/__FRONT__/images/icon/job-detail-content.png"
            >
                <van-field
                        v-model="userExtendBus.company_intro"
                        slot="default"
                        rows="3"
                        type="textarea"
                        maxlength="100"
                        placeholder="请输入公司简介"
                        show-word-limit
                ></van-field>
            </van-cell>

            <!--公司简介-->


        </van-col>


        <!--其他-->
        <van-col span="24">
            <van-divider :style="{borderColor: '#32a14a', padding: '0px', margin: '5px'}"></van-divider>
            <van-cell title="其他联系方式" icon="/__FRONT__/images/icon/user-setting-other.png" > </van-cell>

            <van-cell title="邮箱"
                      class="thirdStep-cell-li van-cell-li"
                      icon="/__FRONT__/images/icon/user-setting-email.png"
            >
                <van-field
                        v-model="userInfo.email"
                        input-align="center"
                        slot="default"
                        border="false"
                        placeholder="请输入您公司的邮箱"
                >
                </van-field>
            </van-cell>

            </van-cell>


        </van-col>



    </van-row>
    <!-- 公司认证信息 -->

    <van-goods-action>
        <van-goods-action-button
                type="danger"
                text="提交"
                style="border-radius: 0px; margin-left: 0px;margin-right: 0px;"
                @click="submitApprove"
        ></van-goods-action-button>
    </van-goods-action>

    <!--区域方式选择器-->
    <van-popup
            v-model="showSelectArea"
            position="bottom"
    >
        <van-area
                :area-list="selectArea"
                @cancel="showSelectArea = false"
                @confirm="confirmSelectArea"
        ></van-area>
    </van-popup>
    <!--区域选择器-->
    <!--法人证件照-->
    <van-popup
            v-model="showUploadPhoto"
            position="bottom"
            :style="{ height:'100%'}"
    >
        <van-nav-bar title="上传法人证件照" left-arrow @click-left="confirmUploadPhoto" left-text="返回" ></van-nav-bar>
        <van-row style="padding: 15px;">
            <van-uploader
                    :after-read="afterReadUpload"
                    preview-size="100%"
                    class="van-uploader-img-zm"
                    :max-count="1"
                    v-model="idCardZm"
                    name="id_card_zm"
            >
            </van-uploader>
            <van-divider :style="{borderColor: '#32a14a', padding: '0px', margin: '10px'}"></van-divider>
            <van-uploader
                    :after-read="afterReadUpload"
                    preview-size="100%"
                    class="van-uploader-img-bm"
                    :max-count="1"
                    v-model="idCardBm"
                    name="id_card_bm"
            >
            </van-uploader>
        </van-row>
        <van-row>
            <van-col span="24">
                <van-button type="primary" size="large" @click="confirmUploadPhoto">返回</van-button>
            </van-col>
        </van-row>
    </van-popup>
    <!--法人证件照-->
    <!--营业执照-->
    <van-popup
            v-model="showLicenseUploadPhoto"
            position="bottom"
            :style="{ height:'100%'}"
    >
        <van-nav-bar title="上传营业执照" left-arrow @click-left="confirmUploadPhoto" left-text="返回" ></van-nav-bar>
        <van-row style="padding: 15px;">
            <van-uploader
                    :after-read="afterReadUpload"
                    preview-size="100%"
                    class="van-uploader-img-license"
                    :max-count="1"
                    v-model="licenseImg"
                    name="company_license_img"
            >
            </van-uploader>


            <van-divider :style="{borderColor: '#32a14a', padding: '0px', margin: '10px'}"></van-divider>


            <van-uploader
                    :after-read="afterReadUpload"
                    preview-size="100%"
                    class="van-uploader-img-logo"
                    :max-count="1"
                    v-model="companyLogo"
                    name="company_logo"
            >
            </van-uploader>

        </van-row>
        <van-row>
            <van-col span="24">
                <van-button type="primary" size="large" @click="confirmUploadPhoto">保存</van-button>
            </van-col>
        </van-row>
    </van-popup>
    <!--营业执照-->




</div>









<script>

    Vue.use(vant.Lazyload);

    var vm = new Vue({
        el: '#app',
        data() {
            return {
                currentRate: 0,
                active:3,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },


                userInfo:{},
                userExtend:{},
                userExtendBus:{
                    company_intro: '',
                },


                //地区选择
                showSelectArea: false,
                selectArea: {},


                //法人证件照
                showUploadPhoto:false,
                idCardZm: [],
                idCardBm: [],

                //营业执照
                showLicenseUploadPhoto:false,
                licenseImg: [],
                companyLogo: [],

                phone:{
                    error: '',
                    smsCode: '',
                    sendText: '发送验证码',
                    isSendSmsCode: true,
                    againTime: 120000,
                }


            };
        },

        created(){
            //个人信息
            axiosRequest.get('/api/user/userInfo', {params:{userExtend:1,userExtendBus:1}}).then(function (response) {
                if (response.code == 200) {
                    vm.$data.userInfo = response.data.userInfo;
                    //处理重新认证地区
                    if (response.data.userInfo.areainfo.trim().length > 3) {
                        var areaArr = response.data.userInfo.areainfo.trim().split(' ');
                        if (areaArr.length >= 3) {
                            vm.$data.userInfo.provinceid = areaArr[0];
                            vm.$data.userInfo.cityid = areaArr[1];
                            vm.$data.userInfo.areaid = areaArr[2];
                        } else {
                            vm.$data.userInfo.areainfo = '';
                        }
                    } else {
                        vm.$data.userInfo.areainfo = '';
                    }
                    vm.$data.userExtend = response.data.userInfo.extend;
                    vm.$data.userExtendBus = response.data.userInfo.extendBus;
                } else {
                    vant.Toast(response.msg);
                }
            });

            //获取系统中开放的地区
            axiosRequest.get('/api/common/openArea').then(function (response) {
                if (response.code == 200) {
                    vm.$data.selectArea = response.data;
                }
            });
        },

        computed:{
            showArea(){
                return this.userInfo.cityid ? this.userInfo.areainfo : '请选择地区';
            },
            showIsUploadFr(){
                if (this.userExtendBus.id_card_zm_img && this.userExtendBus.id_card_bm_img) {
                    return '已上传法人证件';
                }
                return '请上传法人证件';
            },
            showIsUploadGs(){
                if (this.userExtendBus.company_license_img && this.userExtendBus.company_logo) {
                    return '已上传营业证件照';
                }
                return '请上传营业证件照';
            }

        },

        methods:{

            //返回上一页
            goBack(){
                history.back();
            },

            //检测手机号码
            checkPhoneNum(){
                var reg = /^1(1|3|4|5|6|7|8|9)\d{1}[-]?\d{4}[-]?\d{4}$/;
                if(!reg.test(this.userExtendBus.company_mobile)){
                    this.phone.error = '请输入正确的电话号码!';
                } else {
                    this.phone.error = '';
                }
            },
            //发送短信验证码
            sendSmsCode(){
                if (!this.phone.isSendSmsCode) {
                    return false;
                }
                var postData = {
                    phone: this.userExtendBus.company_mobile
                };
                axiosRequest.post('/api/common/smsCode', postData).then(function (response) {
                    if (response.code == 200) {
                        vant.Toast('请及时查收短信！');
                        vm.$data.phone.isSendSmsCode = false;
                    } else {
                        if (response.code == 100006) {
                            vant.Toast(response.msg);
                        } else {
                            vant.Toast('发送短信验证码失败,请稍后再试！');
                        }
                    }
                });

            },
            //显示可以再次发送短信
            showSendSmsCode(){
                this.phone.sendText = '重发验证码';
                this.phone.isSendSmsCode = true;
            },


            submitApprove(){
                var postData = {
                    company_name: this.userExtendBus.company_name,
                    company_logo: this.userExtendBus.company_logo,
                    company_intro: this.userExtendBus.company_intro,
                    company_address: this.userInfo.areainfo,
                    legal_person_name: this.userExtendBus.legal_person_name,
                    legal_person_id_card: this.userExtendBus.legal_person_id_card,
                    company_mobile: this.userExtendBus.company_mobile,
                    id_card_zm_img: this.userExtendBus.id_card_zm_img,
                    id_card_bm_img: this.userExtendBus.id_card_bm_img,
                    company_license: this.userExtendBus.company_license,
                    company_license_img: this.userExtendBus.company_license_img,
                    email: this.userInfo.email,
                    provinceid: this.userInfo.provinceid,
                    cityid: this.userInfo.cityid,
                    areaid: this.userInfo.areaid,
                    areainfo: this.userInfo.areainfo,
                    smsCode: this.phone.smsCode
                };

                var checkData = [
                    {
                        field: 'company_name',
                        errorMsg: '请填写公司名称!',
                    },
                    {
                        field: 'company_logo',
                        errorMsg: '请上传公司logo',
                    },
                    {
                        field: 'company_address',
                        errorMsg: '请填写公司地址',
                    },
                    {
                        field: 'legal_person_name',
                        errorMsg: '请填写法人信息',
                    },
                    {
                        field: 'legal_person_id_card',
                        errorMsg: '请填写法人身份证件号',
                    },
                    {
                        field: 'company_mobile',
                        errorMsg: '请填写公司联系方式',
                    },
                    {
                        field: 'id_card_zm_img',
                        errorMsg: '请上传法人证件照正面',
                    },
                    {
                        field: 'id_card_bm_img',
                        errorMsg: '请上传法人证件照正面',
                    },
                    {
                        field: 'company_license',
                        errorMsg: '请填写公司营业执照',
                    },
                    {
                        field: 'company_license_img',
                        errorMsg: '请上传公司营业执照',
                    },
                    {
                        field: 'areaid',
                        errorMsg: '请选择公司所属地区',
                    },
                    {
                        field: 'smsCode',
                        errorMsg: '请填写验证码!',
                    }
                ];
                //检测是否填写相应的数据
                for(var item of checkData) {
                    if (!postData[item.field]) {
                        vant.Toast(item.errorMsg);
                        return false;
                    }
                }
                axiosRequest.post('/api/user/approveCompany', postData).then(function (response) {
                    if (response.code == 200) {
                        vant.Toast({
                            message: '提交认证成功,请等待审核!',
                            onClose(){
                                window.location.href = '/index/Usercenter/userSetting';
                            }
                        });
                    } else {
                        vant.Toast('提交认证失败，请稍后再试！');
                    }
                });

            },



            //选择所属地区
            clickShowSelectArea(){
                this.showSelectArea = true;
            },
            confirmSelectArea(item){
                this.userInfo.areainfo = '';
                item.forEach(function(one, index){
                    if (index == 0) {
                        vm.$data.userInfo.provinceid = one.name;
                    }
                    if (index == 1) {
                        vm.$data.userInfo.cityid = one.name;
                    }
                    if (index == 2) {
                        vm.$data.userInfo.areaid = one.name;
                    }
                    vm.$data.userInfo.areainfo += ' ' + one.name;
                });
                this.showSelectArea = false;
            },



            //上传证件照
            clickShowPhoto(){
                this.showUploadPhoto = true;
            },
            confirmUploadPhoto(){
                this.showUploadPhoto = false;
                this.showLicenseUploadPhoto = false;
            },

            //上传营业执照
            clickShowLicenseUploadPhoto(){
                this.showLicenseUploadPhoto = true;
            },



            afterReadUpload(file, name){
                //上传图片
                var postData = {
                    img: file.content,
                    savePath: 'idcardimg/' + this.userInfo.id + '/',
                    extend: name.name
                };
                axiosRequest.post('/api/common/uploadImg', postData).then(function (response) {
                    if (response.code == 200) {
                        if (response.data.img) {
                            if (response.data.extend == 'id_card_zm') {
                                vm.$data.idCardZm = [
                                    {'url' : response.data.img}
                                ];
                                vm.$data.userExtendBus.id_card_zm_img = response.data.img;
                            }
                            if (response.data.extend == 'id_card_bm') {
                                vm.$data.idCardBm = [
                                    {'url' : response.data.img}
                                ];
                                vm.$data.userExtendBus.id_card_bm_img = response.data.img;
                            }
                            if (response.data.extend == 'company_license_img') {
                                vm.$data.licenseImg = [
                                    {'url' : response.data.img}
                                ];
                                vm.$data.userExtendBus.company_license_img = response.data.img;
                            }
                            if (response.data.extend == 'company_logo') {
                                vm.$data.companyLogo = [
                                    {'url' : response.data.img}
                                ];
                                vm.$data.userExtendBus.company_logo = response.data.img;
                            }
                        } else {
                            vant.Toast('上传失败!');
                        }
                    } else {
                        vant.Toast('上传失败!');
                    }
                });

                return true;
            }


        }
    });




</script>

{include file="common/foot-bottom" /}

